<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <style>
        .login-container {
            width: 400px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        .btn {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        .error-message {
            color: red;
            margin-bottom: 10px;
        }

        .success-message {
            color: green;
            margin-bottom: 10px;
        }

        /* 新增切换按钮样式 */
        .tab-buttons {
            display: flex;
            width: 100%;
            /*margin-bottom: 20px;*/
        }

        .tab-button {
            padding: 10px 20px;
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;

            flex: 1 0 50%; /* 平分宽度 */
            text-align: center;
            padding: 10px 0; /* 保持垂直居中 */
            box-sizing: border-box; /* 确保 padding 不影响宽度计算 */
            box-sizing: border-box;
        }

        .tab-button.active {
            background-color: #0d6efd;
            color: white;
            border-bottom: none;
        }

        .tab-content {
            padding: 20px;
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 5px 5px;
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2 style="text-align: center;">用户登录</h2>

    <% if (request.getAttribute("error") != null) { %>
    <div class="error-message">${error}</div>
    <% } %>

    <% if (request.getAttribute("message") != null) { %>
    <div class="success-message">${message}</div>
    <% } %>
    <!-- 显示提示信息 -->
    <c:if test="${not empty sessionScope['message']}">
        <div class="error-message">${sessionScope['message']}</div>
        <c:remove var="message" scope="session"/>
    </c:if>
    <div class="tab-buttons">
        <span class="tab-button active" data-tab="phone">手机登录</span>
        <span class="tab-button" data-tab="email">邮箱登录</span>
    </div>

    <div id="phone-form" class="tab-content" style="display: none;">
        <form action="${pageContext.request.contextPath}/user/login" method="post">
            <input type="hidden" name="loginType" value="phone">
            <div class="form-group">
                <label for="phone">手机号：</label>
                <input value="13438644943" type="text" id="phone" name="phone" required>
            </div>

            <div class="form-group">
                <label for="password">密码：</label>
                <input value="Ahjiuyhj" type="password" id="password" name="password" required>
            </div>

            <button type="submit" class="btn">登录</button>
        </form>
    </div>
    <div id="email-form" class="tab-content" style="display: none;">
        <form action="${pageContext.request.contextPath}/user/login" method="post">
            <input type="hidden" name="loginType" value="email">
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input value="1873866370@qq.com" type="text" id="email" name="email" required>
            </div>

            <div class="form-group">
                <label for="password-email">密码：</label>
                <input value="18783274956" type="password" id="password-email" name="password" required>
            </div>

            <button type="submit" class="btn">登录</button>
        </form>
    </div>

    <div style="margin-top: 15px; text-align: center;">
        <a href="${pageContext.request.contextPath}/user/register">没有账号？立即注册</a>
    </div>
</div>
<script>
    <%--document.querySelectorAll('.tab-button').forEach(button => {--%>
    <%--    button.addEventListener('click', function () {--%>
    <%--        const tab = this.dataset.tab;--%>
    <%--        document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));--%>
    <%--        this.classList.add('active');--%>
    <%--        document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');--%>
    <%--        document.getElementById(`${tab}-form`).style.display = 'block';--%>
    <%--    });--%>
    <%--});--%>

    <%--// 模拟发送验证码（需替换为实际接口）--%>
    <%--function sendSmsCode() {--%>
    <%--    alert('验证码已发送，请注意查收！');--%>
    <%--}--%>
    document.addEventListener('DOMContentLoaded', function () {
        const buttons = document.querySelectorAll('.tab-button');
        const contents = document.querySelectorAll('.tab-content');

        // 从 JSP 获取后端传来的 loginType
        const loginType = "${loginType}";
        console.log("loginType:", loginType)

        // 封装切换逻辑为函数，避免重复代码
        function switchTab(tab) {
            // 更新按钮高亮状态
            buttons.forEach(b => b.classList.remove('active'));
            const activeButton = document.querySelector('.tab-button[data-tab="' + tab + '"]');
            if (activeButton) activeButton.classList.add('active');

            // 显示对应表单
            contents.forEach(content => content.style.display = 'none');
            const form = document.getElementById(tab+"-form");
            if (form) form.style.display = 'block';
        }

        // 绑定点击事件
        buttons.forEach(button => {
            button.addEventListener('click', function () {
                const tab = this.dataset.tab;
                switchTab(tab);
            });
        });

        // 初始化：优先使用 loginType，否则使用 .active 按钮
        if (loginType) {
            switchTab(loginType); // 使用后端传来的登录类型
        } else {
            // 默认激活第一个 tab
            const defaultTab = document.querySelector('.tab-button.active')?.dataset.tab;
            if (defaultTab) switchTab(defaultTab);
        }
    });
</script>
</body>
</html> 